<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*,
com.brother.model.*,com.brother.service.*"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="../international.jsp" %> 
<%
com.brother.model.Customer user = (com.brother.model.Customer)session.getAttribute(com.brother.Constants.LOGIN_SESSTION_NAME);
if(user == null || user.getUserid() == 0 || !user.isAdmin())
	return;
String trackerId = request.getParameter("trackerId");
TrackerService tks = new TrackerService();
String action = request.getParameter("action");
AlarmService almService = new AlarmService();
Alarm alarm = null;
if(action == null){
	action = "geofenceAdd";
}else if(action.equalsIgnoreCase("geofenceEdit")){
	alarm = new Alarm();
	alarm.setAlarmId(Integer.parseInt(request.getParameter("alarmId")));
	List<Alarm> als = almService.findAlarms(alarm);
	if(als.size() > 0){
		alarm = als.get(0);
	}
}

Tracker tracker = tks.getTrackerByFieldName("trackerId", trackerId);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>					

<title><fmt:message key="realtime.geo.fence"/></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../style.css"/>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
    <script type="text/javascript" src="../js/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/extexample.js"></script>
<script type="text/javascript" src="../js/TableGrid.js"></script>
<script>
function trans_pos(pos)
{
	var data1 = parseInt(pos) * 100;
	var data2 = (pos - parseInt(pos)) * 60;
	return parseFloat(data1 + data2).toFixed(4);
}

function trans_lat(data)
{
	data = trans_pos(data);
	if (data < 0)
	{
		return (data * (-1)) + ",S";
	}
	else
	{
		return data + ",N";
	}
}

function trans_lng(data)
{
	data = trans_pos(data);
	if (data < 0)
	{
		return (data * (-1)) + ",W";
	}
	else
	{
		return data + ",E";
	}
}

function check_value()
{
	var name = document.getElementById("name");
	if(name.value ==""){
		alert("<fmt:message key="control.geofence.please.input.name"/>");
		name.focus();
		return false;
	}

	var data_value = document.control.data.value;
	var data_array = data_value.split(";");
	if (data_array.length < 4)
	{
		alert('<fmt:message key="control.geofence.please.select.range"/>');
		document.control.data.focus();
		return false;
	}
	
	var start_array = data_array[0].split(",");
	if (start_array.length != 2)
	{
		alert('<fmt:message key="control.geofence.please.select.range"/>');
		document.control.data.focus();
		return false;
	}
	
	var end_array = data_array[1].split(",");
	if (end_array.length != 2)
	{
		alert('<fmt:message key="control.geofence.please.select.range"/>');
		document.control.data.focus();
		return false;
	}
		
	//var value = trans_lng(start_array[0]) + "," + trans_lat(start_array[1]) + "," + trans_lng(end_array[0]) + "," + trans_lat(end_array[1]);
	// alert(value);
	//document.control.data.value = value;
	//alert(document.control.data.value);
	return true;
}

Ext.onReady(function(){
    // create the grid
    Ext.get("plain-table").setStyle('display','');
    
    var grid = new Ext.ux.grid.TableGrid("plain-table", {
        stripeRows: true, // stripe alternate rows
        enableHdMenu:false,
        hideHeaders:true,
        //width:710,
        title:<%if(action.endsWith("Add")){%>'<fmt:message key="control.geofence.add.new"/>'<%}else{%>'<fmt:message key="control.geofence.edit"/>'<%}%>,
        disableSelection:false
    });

    grid.render();

    function createButton(){

        var buttons = grid.getEl().select('div[id=rangeBtn]');
        if(buttons.getCount() == 0){
    		setTimeout(createButton, 500);
    		return;
        }

        var button = new Ext.Button({renderTo:'rangeBtn',type:'button', 
			text:'<fmt:message key="control.geofence.select.range.from.map"/>',split: false,enableToggle:false,width:200});
		button.on('click',function(){
			try{ selectRange(); }catch(e){}
			});
    	
    	return; // don't do any thing at all.
        
        //console.log(buttons, 1000, grid.getEl().dom);
        buttons.each(function(item,c, index){
			
            var button = new Ext.Button({renderTo:item.parent(),type:'button', 
    			text:item.getAttribute('value'),split: true,enableToggle:false});
    		button.on('click',function(){
    			try{ eval(item.getAttribute("onclick")); }catch(e){}
    			});
            item.remove();
        });
    }

    createButton();
    
});


	function restoreRange(str)
	{
		//window.parent.popupMask.style.display = "block";
		//window.parent.popupContainer.style.display = "block";
		//window.parent.document.getElementById('popupMask').style.display = "block";
		//window.parent.document.getElementById('popupContainer').style.display = "block";
		
		top.settingWin.show();
		
		document.control.data.value = str;
		// alert(str);
	}
	function selectRange()
	{
		//window.parent.document.getElementById('popupMask').style.display = "none";
		//window.parent.document.getElementById('popupContainer').style.display = "none";
		top.settingWin.hide();
		top.realTimePanel.expand();
		var g_map = window.parent.currentMap;

		var data_value = document.control.data.value;
		
		
		window.parent.selectRangeOnMap(restoreRange, data_value);		
	}
	</script>
<style type="text/css">

body{
	background-color:#FFFFFF;
}

.x-grid3-cell-inner  {
text-align:left;
white-space:nowrap;
}


.x-panel-header{
			text-align:left;
		}

</style>
</head><body bgcolor="#ffffff">
<form id="control" name="control" method="post" style="width:730px" action="setControl.jsp" onsubmit="return check_value()">

<table id="plain-table" style="display:none"  cellspacing="0" width="100%">

  <tbody>
  
    <thead>
  <tr>
    <th width="200"></th>
    <th width="530"></th>
  </tr>
  </thead>
  

  <tr>
  	<td><fmt:message key="tracker.name"/>:</td>
	<td><input name="name" id="name" size="30" value="<%=alarm==null?"":alarm.getName() %>"/></td>
  </tr><tr>
  	<td valign="top"><fmt:message key="control.geofence.select.range.from.map"/>:</td>
	
	<td><input name="data" id="data" size="50" value="<%=alarm==null?"":alarm.getData()%>"/>&nbsp;&nbsp;<div id="rangeBtn"></div><fmt:message key="control.geofence.select.range.tip"/></td>
  </tr>
  <tr>
    <td valign="top"><fmt:message key="control.geofence.alarm.when"/>:</td>
    <td>
	<select name="condition" id="condition">
			<option value="0" <%=alarm==null?"selected=\"selected\"" : alarm.getCondition().equals("0")?"selected=\"selected\"":""%>><fmt:message key="control.geofence.leave.range"/></option>
			<option value="1" <%=alarm==null?"" : alarm.getCondition().equals("1")?"selected=\"selected\"":""%>><fmt:message key="control.geofence.enter.range"/></option>
		</select>
	</td>
  </tr>
  <tr>
    <td valign="top"><fmt:message key="control.geofence.state"/>:</td>
    <td>
	<select name="state" id="state">
			<option value="0" <%=alarm==null?"" : alarm.getState().equals("0")?"selected=\"selected\"":""%>><fmt:message key="control.geofence.state.disable"/></option>
			<option value="1" <%=alarm==null?"selected=\"selected\"" : alarm.getState().equals("1")?"selected=\"selected\"":""%>><fmt:message key="control.geofence.state.enable"/></option>
		</select>
	</td>
  </tr>  
</tbody>

</table>

<table align="left" width="100%">
	<tbody><tr>
	<td width="210">&nbsp;</td>
		<td width="60" align="left" id="submitBtn" >
			<script>
	         button = new Ext.Button({renderTo:'submitBtn',type:'submit', width:50,
				text:'<fmt:message key="control.geofence.submit"/>',split: false,enableToggle:false});
			button.on('click',function(){
				if(check_value())
					document.forms[0].submit();
				});
			</script>
			
		</td>
		<td align="left" id="backBtn">
		<script>
	        var button = new Ext.Button({renderTo:'backBtn',type:'button', width:50,
				text:'<fmt:message key="control.geofence.back"/>',split: false,enableToggle:false});
			button.on('click',function(){
				window.location.href='./sysgeofence.jsp?trackerId=<%=tracker.getTrackerid()%>';
				});
			</script>
	  <input name="trackerId" value="<%=tracker.getTrackerid()%>" type="hidden"/>
	  <input name="uin" value="<%=tracker.getUserTrackerId()%>" type="hidden"/>
	  <input name="alarmId" value="<%=alarm == null ?"0":alarm.getAlarmId()%>"  type="hidden"/>
      
	  <input name="action" value="<%=action%>" type="hidden"/>
		</td>
	</tr>
	
</tbody></table>		
</form>
</body></html>
<%
com.brother.database.DataBase.closeThreadConnection();
%>
